<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

const userGrowthChart = ref(null)
const userRegionChart = ref(null)
const userActivityChart = ref(null)
const conversionRateChart = ref(null)

// 数据卡片信息
const dataCards = ref([
  { title: '总用户数', value: '8,846', increase: '12%', icon: 'User' },
  { title: '今日活跃', value: '2,356', increase: '5.8%', icon: 'View' },
  { title: '转化率', value: '32.4%', increase: '2.1%', icon: 'Promotion' },
  { title: '平均停留', value: '8.5分钟', increase: '-1.2%', icon: 'Timer' },
])

onMounted(() => {
  // 初始化用户增长趋势图
  const userGrowthChartInstance = echarts.init(userGrowthChart.value)
  userGrowthChartInstance.setOption({
    title: {
      text: '用户增长趋势'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['新增用户', '活跃用户']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '新增用户',
        data: [150, 230, 224, 218, 135, 147],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        }
      },
      {
        name: '活跃用户',
        data: [120, 200, 210, 240, 180, 190],
        type: 'line',
        smooth: true
      }
    ]
  })

  // 初始化用户地域分布图
  const userRegionChartInstance = echarts.init(userRegionChart.value)
  userRegionChartInstance.setOption({
    title: {
      text: '用户地域分布'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      right: '5%',
      top: 'center'
    },
    series: [{
      name: '用户分布',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '20',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: '华东地区' },
        { value: 735, name: '华北地区' },
        { value: 580, name: '华南地区' },
        { value: 484, name: '西南地区' },
        { value: 300, name: '其他地区' }
      ]
    }]
  })

  // 初始化用户活跃度图表
  const userActivityChartInstance = echarts.init(userActivityChart.value)
  userActivityChartInstance.setOption({
    title: {
      text: '用户活跃度分析'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['日活', '周活', '月活']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value'
    },
    yAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月']
    },
    series: [
      {
        name: '日活',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: [320, 302, 341, 374, 390, 450]
      },
      {
        name: '周活',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: [120, 132, 101, 134, 190, 230]
      },
      {
        name: '月活',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: [220, 182, 191, 234, 290, 330]
      }
    ]
  })

  // 初始化转化率漏斗图
  const conversionRateChartInstance = echarts.init(conversionRateChart.value)
  conversionRateChartInstance.setOption({
    title: {
      text: '用户转化漏斗'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c}%'
    },
    legend: {
      data: ['访问', '注册', '下单', '支付', '复购']
    },
    series: [
      {
        name: '转化率',
        type: 'funnel',
        left: '10%',
        top: 60,
        bottom: 60,
        width: '80%',
        min: 0,
        max: 100,
        minSize: '0%',
        maxSize: '100%',
        sort: 'descending',
        gap: 2,
        label: {
          show: true,
          position: 'inside'
        },
        labelLine: {
          length: 10,
          lineStyle: {
            width: 1,
            type: 'solid'
          }
        },
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 1
        },
        emphasis: {
          label: {
            fontSize: 20
          }
        },
        data: [
          { value: 100, name: '访问' },
          { value: 80, name: '注册' },
          { value: 60, name: '下单' },
          { value: 40, name: '支付' },
          { value: 20, name: '复购' }
        ]
      }
    ]
  })

  // 监听窗口大小变化
  window.addEventListener('resize', () => {
    userGrowthChartInstance.resize()
    userRegionChartInstance.resize()
    userActivityChartInstance.resize()
    conversionRateChartInstance.resize()
  })
})
</script>

<template>
  <div class="analysis-container">
    <!-- 数据卡片部分 -->
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="6" v-for="(card, index) in dataCards" :key="index">
        <el-card class="data-card" shadow="hover">
          <div class="card-header">
            <span class="card-title">{{ card.title }}</span>
            <el-icon class="card-icon"><component :is="card.icon" /></el-icon>
          </div>
          <div class="card-value">{{ card.value }}</div>
          <div class="card-footer" :class="{ 'increase': card.increase.startsWith('+') || !card.increase.startsWith('-'), 'decrease': card.increase.startsWith('-') }">
            <span>较上月 {{ card.increase }}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表部分 -->
    <el-row :gutter="20" class="mt-20">
      <el-col :xs="24" :lg="12">
        <el-card class="chart-card" shadow="hover">
          <template #header>
            <div class="card-header-with-tools">
              <span>用户增长趋势</span>
              <div class="tools">
                <el-button size="small" type="primary" plain>导出</el-button>
                <el-button size="small">筛选</el-button>
              </div>
            </div>
          </template>
          <div ref="userGrowthChart" class="chart"></div>
        </el-card>
      </el-col>
      <el-col :xs="24" :lg="12">
        <el-card class="chart-card" shadow="hover">
          <template #header>
            <div class="card-header-with-tools">
              <span>用户地域分布</span>
              <div class="tools">
                <el-button size="small" type="primary" plain>导出</el-button>
                <el-button size="small">筛选</el-button>
              </div>
            </div>
          </template>
          <div ref="userRegionChart" class="chart"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mt-20">
      <el-col :xs="24" :lg="12">
        <el-card class="chart-card" shadow="hover">
          <template #header>
            <div class="card-header-with-tools">
              <span>用户活跃度分析</span>
              <div class="tools">
                <el-button size="small" type="primary" plain>导出</el-button>
                <el-button size="small">筛选</el-button>
              </div>
            </div>
          </template>
          <div ref="userActivityChart" class="chart"></div>
        </el-card>
      </el-col>
      <el-col :xs="24" :lg="12">
        <el-card class="chart-card" shadow="hover">
          <template #header>
            <div class="card-header-with-tools">
              <span>用户转化漏斗</span>
              <div class="tools">
                <el-button size="small" type="primary" plain>导出</el-button>
                <el-button size="small">筛选</el-button>
              </div>
            </div>
          </template>
          <div ref="conversionRateChart" class="chart"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.analysis-container {
  padding: 20px;
}

.chart-card {
  margin-bottom: 20px;
  height: 450px;
  transition: all 0.3s;
}

.chart-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.chart {
  height: 380px;
  width: 100%;
}

.mt-20 {
  margin-top: 20px;
}

.data-card {
  height: 120px;
  margin-bottom: 20px;
  transition: all 0.3s;
}

.data-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.card-title {
  font-size: 14px;
  color: #909399;
}

.card-icon {
  font-size: 20px;
  color: #409EFF;
}

.card-value {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.card-footer {
  font-size: 12px;
}

.increase {
  color: #67C23A;
}

.decrease {
  color: #F56C6C;
}

.card-header-with-tools {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tools {
  display: flex;
  gap: 10px;
}

@media (max-width: 768px) {
  .chart {
    height: 300px;
  }
  
  .chart-card {
    height: 370px;
  }
}
</style> 